<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <link rel="stylesheet" type='text/css' href="./reset.css">
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .view {
        position: relative;
        width: 640px;
        height: 360px;
        margin: 100px auto;
        top: 20vh;
      }
      ul {
        width: 100%;
        height: 100%;
        list-style: none;
        transform-style: preserve-3d;
        transform: rotate3d(1, 1, 0, 0);
        perspective: 800;
      }
      ul li {
        position: relative;
        float: left;
        font-size: 0;
        width: 20%;
        height: 100%;
        transition: 0.3s all linear;
        transform-style: preserve-3d;
        perspective: 800;
      }
      ul li span {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #000;
      } 
      ul li span:nth-of-type(1) {
        transform: translateZ(180px);
        background: url('https://source.unsplash.com/random/720x405?a');
      }
      ul li span:nth-of-type(2) {
        transform: translateY(-180px) rotateX(90deg);
        background: url('https://source.unsplash.com/random/720x405?b');
      }
      ul li span:nth-of-type(3) {
        transform: translateZ(-180px) rotateX(180deg);
        background: url('https://source.unsplash.com/random/720x405?c');
      }
      ul li span:nth-of-type(4) {
        transform: translateY(180px) rotateX(-90deg);
        background: url('https://source.unsplash.com/random/720x405?d');
      }
      ul li:nth-of-type(1)>span {
        background-position: 0 0;
        background-size: 500% 100%;
      }
      ul li:nth-of-type(2)>span {
        background-position: -100% 0;
        background-size: 500% 100%;
      }
      ul li:nth-of-type(3)>span {
        background-position: -200% 0;
        background-size: 500% 100%;
      }
      ul li:nth-of-type(4)>span {
        background-position: -300% 0;
        background-size: 500% 100%;
      }
      ul li:nth-of-type(5)>span {
        background-position: -400% 0;
        background-size: 500% 100%;
      }
    </style>
  </head>
  <body>
    <div class='view'>
      <ul>
        <li>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
        <li>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
        <li>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
        <li>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
        <li>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
      </ul>
    </div>
    <script>
      let index = 0;
      let lis = document.querySelectorAll('li');
      function run() {
        index--;
        lis.forEach((li, i)=> {
          li.style.transitionDelay = `${i * 0.07}s`;
          li.style.transform = `rotateX(${index * 90}deg)`;
        })
      }
      interval = setInterval(run, 2500);
    </script>
  </body>
</html>